<template>
  <div class="demo">
    <div class="demo-title">定制回填内容</div>
    <div class="demo-content">
      <Space direction="vertical" style="width: 100%">
        <Select
          v-model:value="value"
          mode="multiple"
          style="width: 100%"
          placeholder="select one country"
          option-label-prop="children"
        >
          <Select.Option value="china" label="China">
            <span role="img" aria-label="China">🇨🇳</span>
            &nbsp;&nbsp;China (中国)
          </Select.Option>
          <Select.Option value="usa" label="USA">
            <span role="img" aria-label="USA">🇺🇸</span>
            &nbsp;&nbsp;USA (美国)
          </Select.Option>
          <Select.Option value="japan" label="Japan">
            <span role="img" aria-label="Japan">🇯🇵</span>
            &nbsp;&nbsp;Japan (日本)
          </Select.Option>
          <Select.Option value="korea" label="Korea">
            <span role="img" aria-label="Korea">🇰🇷</span>
            &nbsp;&nbsp;Korea (韩国)
          </Select.Option>
        </Select>
        <Select
          v-model:value="value"
          mode="multiple"
          style="width: 100%"
          placeholder="select one country"
          option-label-prop="label"
          :options="options"
        >
          <template #option="{ value: val, label, icon }">
            <span role="img" :aria-label="val">{{ icon }}</span>
            &nbsp;&nbsp;{{ label }}
          </template>
        </Select>
        <span>Note: v-slot:option support from v2.2.5</span>
      </Space>
      <br />
      <br />
      <Space direction="vertical" style="width: 100%">
        <Select
          v-model:value="value"
          mode="multiple"
          style="width: 100%"
          placeholder="select one country"
          :options="options"
        >
          <template #option="{ value: val, label, icon }">
            <span role="img" :aria-label="val">{{ icon }}</span>
            &nbsp;&nbsp;{{ label }}
          </template>
          <template #tagRender="{ value: val, label, closable, onClose, option }">
            <Tag :closable="closable" style="margin-right: 3px" @close="onClose">
              {{ label }}&nbsp;&nbsp;
              <span role="img" :aria-label="val">{{ option.icon }}</span>
            </Tag>
          </template>
        </Select>
        <span>Note: v-slot:tagRender support from v3.0</span>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Space from '@sscd/space';
  import Tag from '@sscd/tag';
  import Select from '@sscd/select';
  const value = ref(['china']);
  const options = ref([
    { value: 'china', label: 'China (中国)', icon: '🇨🇳' },
    { value: 'usa', label: 'USA (美国)', icon: '🇺🇸' },
    { value: 'japan', label: 'Japan (日本)', icon: '🇯🇵' },
    { value: 'korea', label: 'Korea (韩国)', icon: '🇨🇰' },
  ]);
  watch(
    () => value,
    (val) => {
      console.log(`selected:`, val);
    }
  );
</script>
